<template xmlns:v-bind="http://www.w3.org/1999/xhtml">
  <div id="changePassWord">
  <div class="loginBody" :style="loginBg">
    <div class="loginForm">
      <div class="loginTitle">
        修改密码
      </div>
      <div class="loginDiv">
        <el-row class="login">
          <div class="grid-content bg-purple"> &nbsp </div>
          <div class="grid-content bg-purple-light">
            <el-form ref="form" :model="form" :rules="rules">
              <el-form-item label="原密码" prop="password" class="inputLable originPassword">
                <el-input  icon="search"   v-model="form.password" placeholder="请输入密码" :type="originPassType" class="inputStyle">
                </el-input>
              </el-form-item>
              <el-form-item label="新密码" prop="newPassword" class="inputLable newPassword">
                <el-input icon="search"    v-model="form.newPassword" placeholder="请输入密码" :type="newPassType" class="inputStyle">
                </el-input>
              </el-form-item>

                <el-form-item label="确认新密码" prop="confirmPassword" class="inputLable confirmPassword">
                  <el-input icon="search"    v-model="form.confirmPassword" placeholder="请输入密码" :type="confirmPassType" class="inputStyle">
                  </el-input>
                </el-form-item>
                <el-form-item label="验证码" prop="captcha">
                  <el-input v-model="form.captcha" placeholder="请输入验证码" width="50%" class="inputShortStyle"></el-input>
                  <img id="captchaImgUrl" class="captchaImg" v-bind:src="form.captchaImg" @click="loadCaptacha"/>
                </el-form-item>
              <el-form-item class="buttons">
                <el-button  @click="cancle" class="cancelButton">取消</el-button>
                <el-button  @click="confirmChange" class="confirmButton" >确定</el-button>
              </el-form-item>
              <el-form-item>
                <el-alert
                  v-bind:title="msg"
                  v-bind:type="isAlert ? 'error' : 'success'"
                  v-if="show">
                </el-alert>
              </el-form-item>
            </el-form>
          </div>
          <div class="grid-content bg-purple"> &nbsp </div>
        </el-row>
      </div>
    </div>
  </div>
  </div>
</template>
<script>
  import md5 from 'blueimp-md5'
  import uuid from 'uuid-js'
  export default {
    components: {
    },
    data () {
      let validatePass = (rule, value, callback) => {
        let regExp = /^(?![^a-zA-Z]+$)(?!\D+$).{6,12}$/;
        if (value === '') {
          this.isValidated = false;
          return callback(new Error('请输入密码'))
        }else{
          return  callback();
        }
        return callback();
//        console.log("01 this.isValidated = " +  this.isValidated);
      };
      let validateNewPass = (rule, value, callback) => {
        let regExp = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,12}$/;
        if (value === '') {
          this.isValidated = false;
          return callback(new Error('请输入密码'))
        }else if(regExp.test(value) === false){
          this.isValidated = false;
          return callback(new Error('密码格式不正确，请输入6-12位密码，必须字母加数字'));
        }else{
          return callback()
        }
        console.log("02 this.isValidated = " +  this.isValidated);
      };
      let validateConfirmPass = (rule, value, callback) => {
        let regExp = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,12}$/;
        if (value === '') {
          this.isValidated = false;
          return callback(new Error('请输入密码'))
        }else if(regExp.test(value) === false){
          this.isValidated = false;
          callback(new Error('密码格式不正确，请输入6-12位密码，必须字母加数字'));
        }else if(this.form.newPassword != this.form.confirmPassword) {
          this.isValidated = false;
          return callback(new Error("两次输入的密码不一致，请重新输入"));
        }else {
          return callback();
        }
        console.log("03 this.isValidated = " +  this.isValidated)
      };
      let validatecaptcha = (rule, value, callback) => {
        console.log("04 this.isValidated start = " +  this.isValidated)
        let regExp = /^\d{4}$/;
        if (value === '') {
          this.isValidated = false;
          return callback(new Error('请输入验证码'))
        }else if(regExp.test(value) === false){
          this.isValidated = false;
          return callback(new Error('验证码格式不正确，请重新输入'));
        }else{
          return callback();
        }
        console.log("04 this.isValidated end = " +  this.isValidated)
      };
      return {
        msg: '',
        show: false,
        isAlert: false,
        isValidated: '',
        isDebug: true,
        acct:sessionStorage.getItem('USER_NAME'),
        sessionId: uuid.create().toString(),
        passType:'',
        originPassType:'password',
        newPassType:'password',
        confirmPassType:'password',
        loginBg: "background:url(" + require('../../assets/images/login_back.jpg') + ") no-repeat;background-size: cover;",
        form: {
          password: '',
          newPassword:'',
          confirmPassword:'',
          captcha: '',
          captchaImg: ''
        },
        rules: {
          password: [
            {validator:validatePass,trigger:'blur'},
          ],
          newPassword: [
            {validator:validateNewPass,trigger:'blur'},
          ],
          confirmPassword: [
            {validator:validateConfirmPass,trigger:'blur'},
          ],
          captcha: [
            {validator:validatecaptcha,trigger:'blur'},
        ]
        }
      }
    },
    created: function () {
      this.loadCaptacha();
    },
    mounted(){
//        控制密码查看的图标
        let _this=this;
        document.querySelector(".originPassword .el-input__icon").onmousedown=function(e){
          _this.originPassType='text';
        };
        document.querySelector(".originPassword .el-input__icon").onmouseup=function(e){
          _this.originPassType='password';
        };
        document.querySelector(".newPassword .el-input__icon").onmousedown=function(e){
          _this.newPassType='text';
        };
        document.querySelector(".newPassword .el-input__icon").onmouseup=function(e){
          _this.newPassType='password';
        };
        document.querySelector(".confirmPassword .el-input__icon").onmousedown=function(e){
          _this.confirmPassType='text';
        };
        document.querySelector(".confirmPassword .el-input__icon").onmouseup=function(e){
          _this.confirmPassType='password';
        };
    },
    methods: {
      loadCaptacha () {
        var captachaUrl = '/api-web/v1/api/captcha/' + this.sessionId;

        this.$http.get(captachaUrl).then(
          response => {
            var data = response.body;
            console.log(data);
            if (this.isDebug) {
              console.log(JSON.stringify(data));
            }
            this.form.captchaImg = data.result;
          });
      },
      goBack(){
        this.$emit('loginShow');
      },
      cancle(){
        this.$router.go(-1);
      },
      showMsg: function (msg, isAlert) {
        this.msg = msg;
        this.show = true;

        if (this.isDebug) {
          console.log('isAlert : ' + isAlert);
        }
        if (isAlert) {
          this.isAlert = true;
        } else {
          this.isAlert = false;
        }
        setTimeout(function () {
          this.show = false;
        }.bind(this), 3000);
      },
      confirmChange () {
        this.isValidated = true;
        console.log("in confirmChange method");
        this.validateForm();
//        console.log("this.isValidated = " + this.isValidated);
        if (!this.isValidated) {
          return;
        }
        var parms = {
          "pwd": md5(this.form.newPassword),
          "oldPwd": md5(this.form.password),
          "verifySource": this.sessionId,
          "verifyCode": this.form.captcha
        };

        var authUrl = '/api-web/v1/api/auth/user/' + this.acct+ "/pwd";
        this.$http.post(authUrl, parms).then(
          response => {
            this.loadCaptacha();
            var data = response.body;
            if (data.resultCode !== '200') {
              this.showMsg(data.result, true);
              return;
            }
            if (data.result === null || data.result.length === 0) {
              this.showMsg('修改密码失败', true);
              return;
            }
            this.showMsg('修改密码成功!');

            let _this = this;
            setTimeout(function() {
              _this.$router.push('/login');
            }, 2000);

            if (this.isDebug) {
              let {realName, id, name} = data.result;
              sessionStorage.removeItem('realName');
              sessionStorage.removeItem('HKid');
              sessionStorage.removeItem('USER_NAME');
              sessionStorage.removeItem('roleId');
            }
          });
      },
      validateForm () {
        this.isValidated = true;
        console.log("in validateForm method start");
        console.log("in validateForm method this.isValidated = " + this.isValidated);
        this.$refs['form'].validate((valid) => {
          console.log("valid = " + valid)
          console.log("in validate form")
          if (valid) {
            console.log('validated!!');
            this.isValidated = true;
          } else {
            console.log('validateForm failed!!');
            this.isValidated = false;
          }
        });

        console.log("in validateForm method end");
      },
      resetForm () {
        this.$refs['form'].resetFields();
      }
    }
  }
</script>
<style lang="less">
@greenStyle:#63c5ce;
@orangeStyle:#f7931e;
  #changePassWord {
    .loginForm {
      margin: 0 auto;
      position: absolute;
      left: 50%;
      top: 50%;
      margin-left: -267px;
      margin-top: -191px;
    }

    .loginDiv {
      width: 534px;
      height: 410px;
      background-color: RGBA(34, 34, 34, 0.3);
      border: 2px;
      border-color: #000000;
      border-radius: 12px;
      padding-top: 30px;
      padding-bottom: 40px;

    }

    .loginBody {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      text-align: center;
      /*background: url("../../assets/images/login_back.jpg") no-repeat;*/
      /*background-size: cover;*/
    }

    .loginTitle {
      font-size: 30px;
      font-weight: bold;
      color: #ffffff;
      text-align: center;
      margin-bottom: 30px;
    }

    inputLable {
      width: 100px;
      font-size: 14px;
      color: #ffffff;
      text-align: center;

    }

    .inputStyle {
      width: 302px;
      height: 38px;
      border: 1px;
      border-color: #ffffff;
      border-radius: 3px;
      margin-left: 20px;
    }

    .inputShortStyle {
      width: 182px;
      height: 38px;
      border: 1px;
      border-color: #ffffff;
      border-radius: 3px;
      margin-left: 20px;
    }

    .confirmButton {
      width: 130px;
      margin-left: 35px;
      font-size: 16px;
      color: #ffffff;
      background-color: #f7931e;
      text-align: center;
      &:hover{
        background-color: #db7c1d;
      }
    }

    .captchaImg {
      width: 90px;
      height: 34px;
      margin-left: 20px;
    }
    .loginBackSpan {
      color: #ffffff;
      cursor: pointer;
    }

    .goBackDiv {
      margin-left: 150px;
      margin-bottom: 20px;
      font-size: 14px;
    }

    .cancelButton{
      width: 130px;
    }

    .passShowButton{
      height: 38px;
      border: 0;
    }
    .loginBody .el-form-item__label{
      color: #ffffff;
      &:before{
        display:none
      }
    }

    .loginBody .el-form-item__content{
      margin: 0;
      padding: 0;
      text-align: left;
    }

    .loginBody .el-form-item__label{
      margin: 0;
      padding: 0;
      text-align: right;
      width: 130px;
      line-height: 38px;
    }

    .loginBody .el-form-item{
      margin: 0;
      padding: 0;
      height: 66px;
    }

    .loginBody .el-form-item__inner{
      margin: 0;
      padding: 0;
    }

    .loginBody .el-form-item__error{
      margin: 0;
      padding: 0;
      font-size: 12px;
      color: #ff0000;
      margin-left: 150px;
      line-height: 28px;
      position: relative;
    }
    .loginDiv .loginBackButton{
      border: 0;
    }

    .loginButton{
      color:#fff;
      border:0;
    }

    .confirmButton{
      color:#fff;
      border:0;
    }

    .cancelButton{
      &:hover{
        color:#333333;
        border:@orangeStyle;
      }
    }

    .userInfoForm  .el-form-item__label{
      //width: 150px;
      font-size: 14px;
      color: #222222;
    }


    .userInfoForm   .el-input__inner{
      font-size: 14px;
      color: #666666;
      background-color: white;
      height: 30px;

    }

    .userInfoForm .el-form-item{
      margin-bottom: 12px;
    }
    .userInfoForm{
      color: #666666;
    }

    .userInfoForm .el-textarea.is-disabled .el-textarea__inner{
      color: #666666;
      background-color: white;
    }


    .loginForm   .buttons{
      margin-left: 150px;
    }

    .loginForm .cancelButton{
      border-width: 1px;
      border-color: #ffffff;
      background-color: transparent;
      &:hover{
        background-color: #ffffff;
      }
    }

    .loginForm .confirmButton{
      margin-left: 35px;
      background-color: #f7931e;
      &:hover{
        background-color: #db7c1d;
      }
    }
  }


</style>

